<template>
  <div class="cart">
    <div class="bigtitle">购物车</div>
    <!-- 售后界面 -->
    <div class="serve">
      <div class="dot"></div>
      30天无忧退货
      <div class="dot"></div>
      48小时快速退款
      <div class="dot"></div>
      满88元免邮费
    </div>
    <!-- 购物车数据 -->
    <ul class="list">
      <van-swipe-cell v-for="item in list" :key="item.id">
        <li class="goodslist">
          <van-checkbox v-model="item.isSelected" style="margin-left: 25px"></van-checkbox>
          <div class="listtext">
            <img :src="item.list_pic_url" alt="" />
            <div>
              <p class="goods_name">{{ item.goods_name }}</p>
              <div class="retail_price">
                ￥{{ item.retail_price }}
                <span><van-stepper v-model="item.number" /></span>
              </div>
            </div>
          </div>
        </li>
        <template #right>
          <van-button square type="danger" text="删除" @click="delGoods(item.id)" class="delete-button" />
        </template>
      </van-swipe-cell>
    </ul>
    <!-- 底部固定栏 -->
    <div class="fixBot">
      <van-checkbox v-model="isAllSelected">
        <span class="all"> 全选</span>
      </van-checkbox>
      <div class="all" id="total">
        合计: <span>￥{{ total }}</span>
      </div>
      <button @click="submit" class="submit"><span>下单</span></button>
    </div>
  </div>
</template>

<script setup>
import { cartList, deleteAction, submitAction } from '@/api/cart'
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const list = ref([])
onMounted(async () => {
  // 数据初始化
  const res = await cartList({ openId: localStorage.getItem('openId') })
  res.data.forEach((item) => (item.isSelected = false))
  list.value = res.data
})
const submit = () => {
  submitAction({
    allPrise: total.value,
    // 先获取选中的数据 再map
    goodsId: list.value
      .filter((ele) => ele.isSelected)
      .map((ele) => ele.goods_id)
      .join(','),
    openId: localStorage.getItem('openId')
  }).then(res => {
    console.log(res)
    router.push({ name: 'orderView' })
  })
}
// 全选反选
const isAllSelected = computed({
  get () {
    if (list.value.length === 0) {
      return false
    }
    return list.value.every((item) => item.isSelected)
  },
  set (val) {
    // console.log(val)
    list.value.forEach((el) => {
      el.isSelected = val
    })
  }
})
// 删除
const delGoods = (id) => {
  deleteAction({ id }).then(res => {
    console.log(res)
    cartList({ openId: localStorage.getItem('openId') }).then(res => {
      console.log(res)
      list.value = res.data
    })
  })
}
// 总价
const total = computed(() => {
  return list.value.reduce((total, current) => {
    if (current.isSelected) {
      return total + current.number * current.retail_price
    } else {
      return total
    }
  }, 0)
})
</script>
<script>
export default {
  name: 'cartView'
}
</script>

<style lang="scss" scoped>
.cart {
  .delete-button {
    height: 100%;
  }

  background: #edecec;

  .bigtitle {
    width: 100%;
    height: 80px;
    font-size: 36px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
    background-color: #fff;
    text-align: center;
    line-height: 80px;
  }

  .serve {
    background-color: #F8F8F8;
    width: 100%;
    height: 100px;
    line-height: 100px;
    display: flex;
    justify-content: space-around;
    font-size: 24px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;

    .dot {
      width: 11px;
      height: 11px;
      border-radius: 11px;
      border: 3px solid rgba(183, 166, 115, 1);
      margin-top: 42px;
    }
  }

  .list {
    background: #F8F8F8;
    height: 2000px;

    .goodslist {
      width: 710px;
      height: 253px;
      margin: 0 auto;
      margin-bottom: 20px;
      background-color: #fff;
      display: flex;
      align-items: center;
      position: relative;

      .listtext {
        margin-left: 22px;
        display: flex;
        justify-content: flex-start;

        img {
          width: 174px;
          height: 169px;
          margin-top: 42px;
        }

        .goods_name {
          font-size: 30px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 400;
          margin: 37px 0px 99px 0px;
        }

        .retail_price {
          font-size: 28px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 500;
          margin-bottom: 35px;

          span {
            position: absolute;
            bottom: 36px;
            right: 33px;
          }
        }
      }
    }
  }

  .fixBot {
    position: fixed;
    left: 0;
    bottom: 100px;
    right: 0;
    padding: 20px;
    background: #fff;
    display: flex;
    justify-content: space-between;

    .all {
      font-size: 26px;
      color: #999999;
      letter-spacing: 0;
      font-weight: 400;

      span {
        font-size: 28px;
        color: #9e4242;
        letter-spacing: 0;
        font-weight: 500;
      }
    }

    #total {
      position: absolute;
      bottom: 40px;
      right: 280px;
    }

    .submit {
      width: 193px;
      height: 72px;
      background: #cea62a;
      border-radius: 35.75px;
      border: none;

      span {
        font-size: 28px;
        color: #ffffff;
        letter-spacing: 0;
        font-weight: 400;
      }
    }
  }
}
</style>
